<template>
  <div class="p-4 mx-auto max-w-xl">
    <h2 class="mb-4 text-xl font-bold">时间戳转换</h2>
    
    <div class="mb-6">
      <h3 class="mb-2 font-bold">当前时间</h3>
      <div class="flex gap-2 mb-2">
        <div class="flex-1 p-2 rounded">{{ currentDateTime }}</div>
        <button @click="updateCurrentTime" class="px-3 text-white bg-blue-500 rounded">刷新</button>
      </div>
      <div class="flex gap-2">
        <div class="flex-1 p-2 rounded">{{ currentTimestamp }}</div>
        <button @click="copyCurrentTimestamp" class="px-3 text-white bg-purple-500 rounded">复制</button>
      </div>
    </div>

    <div class="mb-6">
      <h3 class="mb-2 font-bold">时间戳转日期时间</h3>
      <div class="flex gap-2 mb-2">
        <input v-model="timestampInput" type="text" class="flex-1 p-2 rounded border" placeholder="输入时间戳（秒）" />
        <button @click="convertTimestampToDate" class="px-3 text-white bg-green-500 rounded">转换</button>
      </div>
      <div class="p-2 rounded">{{ timestampToDateResult }}</div>
    </div>

    <div class="mb-6">
      <h3 class="mb-2 font-bold">日期时间转时间戳</h3>
      <div class="flex gap-2 mb-2">
        <input v-model="dateInput" type="datetime-local" class="flex-1 p-2 rounded border" />
        <button @click="convertDateToTimestamp" class="px-3 text-white bg-green-500 rounded">转换</button>
      </div>
      <div class="p-2 rounded">{{ dateToTimestampResult }}</div>
    </div>

    <div class="mb-6">
      <h3 class="mb-2 font-bold">常用时间计算</h3>
      <div class="flex flex-wrap gap-2">
        <button @click="calculateTime('day')" class="px-3 py-1 text-white bg-blue-400 rounded">一天后</button>
        <button @click="calculateTime('week')" class="px-3 py-1 text-white bg-blue-400 rounded">一周后</button>
        <button @click="calculateTime('month')" class="px-3 py-1 text-white bg-blue-400 rounded">一个月后</button>
        <button @click="calculateTime('year')" class="px-3 py-1 text-white bg-blue-400 rounded">一年后</button>
      </div>
      <div v-if="calculatedTime" class="p-2 mt-2 bg-gray-100 rounded">{{ calculatedTime }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const currentDateTime = ref('')
const currentTimestamp = ref('')
const timestampInput = ref('')
const timestampToDateResult = ref('')
const dateInput = ref('')
const dateToTimestampResult = ref('')
const calculatedTime = ref('')

// 更新当前时间
function updateCurrentTime() {
  const now = new Date()
  currentDateTime.value = formatDateTime(now)
  currentTimestamp.value = Math.floor(now.getTime() / 1000) + ' (秒)'
}

// 复制时间戳到剪贴板
function copyCurrentTimestamp() {
  const timestamp = currentTimestamp.value.split(' ')[0]
  navigator.clipboard.writeText(timestamp)
    .then(() => alert('已复制到剪贴板'))
    .catch(() => alert('复制失败，请手动复制'))
}

// 时间戳转日期时间
function convertTimestampToDate() {
  try {
    const timestamp = parseInt(timestampInput.value)
    if (isNaN(timestamp)) {
      throw new Error('请输入有效的时间戳')
    }
    
    // 自动检测是秒还是毫秒
    const date = new Date(timestamp.toString().length > 10 ? timestamp : timestamp * 1000)
    timestampToDateResult.value = formatDateTime(date)
  } catch (err) {
    timestampToDateResult.value = '无效的时间戳'
  }
}

// 日期时间转时间戳
function convertDateToTimestamp() {
  try {
    const date = new Date(dateInput.value)
    const timestamp = Math.floor(date.getTime() / 1000)
    dateToTimestampResult.value = timestamp + ' (秒)'
  } catch {
    dateToTimestampResult.value = '请输入有效的日期时间'
  }
}

// 常用时间计算
function calculateTime(unit) {
  const now = new Date()
  let result
  
  switch(unit) {
    case 'day':
      result = new Date(now.setDate(now.getDate() + 1))
      break
    case 'week':
      result = new Date(now.setDate(now.getDate() + 7))
      break
    case 'month':
      result = new Date(now.setMonth(now.getMonth() + 1))
      break
    case 'year':
      result = new Date(now.setFullYear(now.getFullYear() + 1))
      break
  }
  
  calculatedTime.value = `${formatDateTime(result)} (${Math.floor(result.getTime() / 1000)})`
}

// 格式化日期时间
function formatDateTime(date) {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

// 初始化时设置当前时间
onMounted(() => {
  updateCurrentTime()
  
  // 设置默认日期时间为当前时间
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  
  dateInput.value = `${year}-${month}-${day}T${hours}:${minutes}`
})
</script> 